<div class="m-2">
    <i class="fa fa-eye mr-1"></i><label class="title">项目管理</label>
    <a href="#" class="btn-link pull-right" data-toggle="modal" data-target="#mdl-add-proj"><i class="fa fa-plus mr-1"></i>新建项目</a>
    <hr class="m-0">

    <table class="table table-sm table-bordered mt-2">
        <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">项目名</th>
                <th scope="col">初始管理员</th>
                <th scope="col">仓库</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for idx, info in ipairs(projs) do %}
            <tr>
                <th scope="row">{{idx}}</th>
                <td>{{info.name}}</td>
                <td>{{info.owner}}</td>
                <td>{*info.repo*}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#mdl-edit-proj" data-id="{{info.id}}" data-name="{{info.name}}" data-repo="{{info.repo}}">修 改</button>
                    <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#mdl-del-proj" data-id="{{info.id}}" data-name="{{info.name}}">删 除</button>
                </td>
            </tr>            
            {% end %}
        </tbody>
    </table>
</div>

<!-- 新建项目对话框 -->
<div id="mdl-add-proj" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新建项目</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>
                <form id="form-add-proj" action="/dashboard/projects/add" method="POST">
                    <div class="form-group">
                        <label for="add-proj-name">项目名</label>
                        <input id="add-proj-name" name="name" type="text" class="form-control" placeholder="项目名理应简短唯一" required autofocus>
                    </div>

                    <div class="form-group">
                        <label for="add-proj-user">拥有者</label>
                        <select class="form-control" id="add-proj-user" name="uid">
                            {% for _, info in ipairs(users) do %}
                            <option value="{{info.id}}">{{info.name}}</option>
                            {% end %}
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="add-proj-role">职位分工</label>
                        <select class="form-control" id="add-proj-role" name="role">
                            {% for idx, title in ipairs(roles) do %}
                            <option value="{{idx}}">{{title}}</option>
                            {% end %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="add-proj-repo">项目仓库，非必填</label>
                        <input id="add-proj-repo" name="repo" type="text" class="form-control" placeholder="将在项目后显示连接">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return add_proj();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改项目对话框 -->
<div id="mdl-edit-proj" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑项目</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>
                <form id="form-edit-proj" action="/dashboard/projects/edit" method="POST">
                    <input id="edit-proj-id" name="id" type="number" hidden>

                    <div class="form-group">
                        <label for="edit-proj-name">项目名</label>
                        <input id="edit-proj-name" name="name" type="text" class="form-control" placeholder="项目名理应简短唯一" required autofocus>
                    </div>

                    <div class="form-group">
                        <label for="edit-proj-repo">项目仓库，非必填</label>
                        <input id="edit-proj-repo" name="repo" type="text" class="form-control" placeholder="将在项目后显示连接">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return edit_proj();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除项目对话框 -->
<div id="mdl-del-proj" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除项目</h5>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <strong>警告：</strong>
                    <ul>
                        <li>删除项目同时影响到该项目的所有任务及成员！</li>
                        <li>需要确认要删除的项目</li>
                    </ul>
                </div>

                <div id="err"></div>
                <form id="form-del-proj">
                    <input id="del-proj-id" name="id" type="number" hidden>
                    请确认需要删除的项目：<span id="del-proj-name" class="text-danger"></span>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return del_proj();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<script>
$('#mdl-del-proj').on('show.bs.modal', function(e) {
    var btn = $(e.relatedTarget);
    $('#mdl-del-proj #del-proj-id').val(btn.data('id'));
    $('#mdl-del-proj #del-proj-name').text(btn.data('name'));
});

$('#mdl-edit-proj').on('show.bs.modal', function(e) {
    var btn = $(e.relatedTarget);
    $('#mdl-edit-proj #edit-proj-id').val(btn.data('id'));
    $('#mdl-edit-proj #edit-proj-name').val(btn.data('name'));
    $('#mdl-edit-proj #edit-proj-repo').val(btn.data('repo'));
});

function __post(url, form, dialog, err_title) {
    $.ajax({
        url: url,
        type: 'POST',
        data: new FormData(document.getElementById(form)),
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        success: function(ret) {
            if (ret.ok) {
                $('.model #err').empty();
                $('.modal').modal('hide');
                last_filter_menu.click();
            } else {
                show_error('#' + dialog + ' #err', err_title, ret.err_msg);
            }
        }
    });
}

function add_proj() {
    __post('/dashboard/admin/add_proj', 'form-add-proj', 'mdl-add-proj', '创建项目失败');
}

function edit_proj() {
    __post('/dashboard/admin/edit_proj', 'form-edit-proj', 'mdl-edit-proj', '修改项目失败');
}

function del_proj() {
    __post('/dashboard/admin/del_proj', 'form-del-proj', 'mdl-del-proj', '删除项目失败');
}
</script>